<!--商品详情 2029375-->
<template lang="html">
	<div>
		<van-nav-bar
		  class="head_top"	
		  :title="data.comName"
		  left-arrow
		  @click-left="leftBack"
		  style="display: flex;align-items: center;"
		>		
			<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
			<van-icon name="weapp-nav" slot="right" color="#333" size="20" @click="showShare"/>
	    </van-nav-bar>
	    

	    <div class="wrap">
           <Floor1 :data="data" :lastAccesstime="lastAccesstime" @clickFun="clickFun"></Floor1>
           <div class="m_desc" @click="clickFun(5)">                           
             <div>{{data.comDesc}}</div>
           </div>
            
           <div class="select" v-if="goodsLabel.length>0||limitCount>0||comIspost>0" @click="clickFun(5)">
           	 <span v-if="limitCount>0">限购</span>
           	 <span v-if="comIspost>0">包邮</span>           	
           	 <span v-for="item in goodsLabel">{{item}}</span>
           </div>
           
           <div style="color: #F22613;" v-if="limitCount>0" @click="clickFun(5)">每人限购{{limitCount}}件</div>
           
           <div class="m_desc_img" style="margin-top: 10px;" @click="clickFun(5)">
           	  <img :src="item" alt="" v-for="(item,index) in data.goodsImageList"/>
           </div>
           
           
           <div class="money" style="display: flex;justify-content: space-between;margin-top: 12px;padding-bottom: 14px;" @click="clickFun(5)">
           	  <div class="cc">
           	  	<!--<img src="../../../../static/img/lanhu/44.png" alt="" style="width: 13px;height: 13px;" v-if="data.money"/>-->
           	  	<!--<span style="color: #FF9630;font-size: 13px;margin-left: 5px;" v-if="data.money">佣金奖励</span>-->
           	  </div>
           	  <div style="color: #999;font-size: 12px;">浏览 {{data.visits}}</div>
           </div>
	    </div>
	    
	    <!--<div style="height: 10px;background: #f2f2f2;"></div>-->
	    
	    

	    <!--<floor42 :data="data"></floor42>-->
	    
	    <div style="height: 10px;background: #f2f2f2;" @click="clickFun(5)"></div>
	    	    
	    	    	    
	    <floor22 ref="floor22" @clickFun="clickFun"></floor22>
	    
	    	    
	    <floor44 ref="floor44" :goodsList="goodsList" @clickFun="clickFun"></floor44>
	    
	    	    
	    
	    <div style="height: 60px;background: #f2f2f2;" @click="clickFun(5)"></div>
	    

        <div class="inputBox" v-if="showInputBox" id="inputBox">
        	<div class="boxWrap">
	        	<div class="i3">
	        		<input type="text"
	        			style="-webkit-user-select: auto;-moz-user-select: auto;" 
	        			autocomplete="off"   
	        		    id="inputId"
	        			v-model="test"
	        			ref="inputBox"
	        			class="sendInput" :placeholder="placeholder"/>
	        	</div>
	        	<div class="i4">
	        		<span class="send" id="sendInput" @click="send">发送</span>
	        	</div>	     		
        	</div>
        </div>
	    
	    <div class="fixFooter" v-if="!showInputBox" :class="{active:isAbsolute}">
	    	<div class="left">
	    		<div class="left-item" @click="changePraise">
	    			<img src="../../../../static/img/lanhu/47.png" alt="" class="icon" v-if="goodsIsPraise==0"/>
	    			<img src="../../../../static/img/lanhu/50.png" alt="" class="icon" v-else/>
	    			<span>点赞</span>
	    		</div>
	    		<div class="left-item" id="dissWrap" @click="clickFun(1)">
	    			<img src="../../../../static/img/lanhu/48.png" alt="" class="icon" id="dissImg"/>
	    			<span id="diss">评论</span>
	    		</div>
	    		<div class="left-item" @click="changeCollection">
	    			<img src="../../../../static/img/lanhu/49.png" alt="" class="icon" v-if="goodsIsCollection==0"/>
	    			<img src="../../../../static/img/lanhu/51.png" alt="" class="icon" v-else/>
	    			<span>收藏</span>
	    		</div>
	    	</div>
	    	<div class="right">
	    		<!--<div class='btn' @click="buy" v-if="isOther&&goodsCount>0||goodsCount==-1">我想要</div>-->
	    		<div class='btn active'  v-if="goodsState==4">已删除</div>
	    		<div class='btn active'  v-else-if="goodsState==2">已下架</div>
	    		<div class='btn active'  v-else-if="goodsCount==0">已售出</div>
	    		<van-button size="small" @click="buy" round color="#FFD630" :loading="wantBtnLoading" 
	    			v-if="isOther&&goodsState==1&&(goodsCount>0||goodsCount==-1)">
	    			<div style="display: flex;align-items: center;justify-content: center;height: 100%;">我想要</div>
	    		</van-button>	    		
	    		
	    	</div>
	    </div>
	    
	    <van-popup v-model="showMoney" style="border-radius:4px;">
	    	<div class="popupWrap">
                  <div style="padding: 55px 0 40px;text-align: center;line-height: 2.0;">
                  	<div v-if="data.money>0">本商品单件佣金为</div>
                  	<div v-if="data.money>0">{{data.money}}元</div>
                  	<div v-if="data.money==0">本商品暂无佣金</div>
                  </div> 
                  <div style="background: #FFD630;padding: 15px 0;text-align: center;
                  	font-size: 15px;color: #333;" @click="showMoney=false">确认</div>
	    	</div>
	    </van-popup>	    
	    <share ref="share" :data="data"  @showMoneyPopup="showMoney=true" :commission="true"></share>
	</div>
</template>                                                                

<script>
import Floor1 from '_c/market/floor/floor01.vue'
import Floor22 from '_c/market/floor/floor22.vue'
import Floor44 from '_c/market/floor/floor44.vue'
import share from '_c/share.vue'
import {getFun,getAppUrl} from '@/api/publicFun.js'	 
import {BrowserInfo} from  '@/api/BrowserInfo.js'  // 判断浏览器环境
let Browser=BrowserInfo()
let publicFun=getFun()
let apiUrl=getAppUrl()
export default {
	name: 'GoodsDetail',	
	components: {
	    Floor1,share,Floor22,Floor44
	},	
	data() {
       return {
       	    type:'',
       	    isAbsolute:false,
            url1:this.$api+'/marketorderservice/api/v1/market/goods', // 请求商品详情的接口
            url5:this.$api+'/marketorderservice/api/v1/market/addGoodsHistory', // 进入页面生成浏览记录
            url2:this.$api+'/marketorderservice/api/v1/market/goodsAddRelation' , // 添加点赞
       	    url3:this.$api+'/marketorderservice/api/v1/market/goodsMinusRelation',// 取消点赞
       	    url4:this.$api+'/marketorderservice/api/v1/market/addDiscuss', // 发送留言
       	    url6:this.$api+'/marketorderservice/api/v1/market/sortGoodsList',   // 猜你喜欢
       	    url7:this.$api+'/marketorderservice/api/v1/market/addCart',  // 添加收藏
       	    url8:this.$api+'/marketorderservice/api/v1/market/deleteCart', // 取消收藏
       	    url9:this.$api+'/marketorderservice/api/v1/market/getIsExistOrder', // 查询此用户是否有订单
       	    isOther:true,  // 是否 不是同一个人
            data:{},       // 商品详情
            lastAccesstime:'',
            goodsLabel:[],
            showMoney:false,
            goodsIsCollection:0,  // 用于绑定是否收藏
            isPraise:0,      // 用于绑定是否超赞
       	    showInputBox:false,  // 用于绑定是否显示输入框       
       	    goodsIsPraise:0,  // 该用户是否点赞
       	    userId:'',     // 用户ID
       	    comId:'',       // 商品ID       	 
       	    userInfo:{}, // 用于绑定当前用户信息
       	    placeholder:'想跟TA说点什么呢…',// 评论框的placeholder
       	    test:'',  // 评论文字
       	    disGid:'',   // 主要用于回复买家 
       	    parentId:0,  // 用于记录当前针对的是谁的留言 0就是第一级留言 
       	    comUid:'',    // 发布者用户ID
            goodsList:[], // 猜你喜欢列表
            goodsCount:-1, // 记录商品库存
            comIspost:'',  // 是否包邮
            limitCount:'', // 是否限购
            wantBtnLoading:false,
            goodsState:0,
            ordersId:''
       }
	},	
	methods: {
		leftBack(){
			if(this.type=='1'){
				this.link('/')
			}else{  
				this.onClickLeft()
			}
		},
		// 我想到按钮
	    buy(){
	      	let that=this	
	      	this.wantBtnLoading=true
	      	let params={
	      		userId:this.userId,
	      		relationtype:3,
	      		typeId:this.comId
	      	}
		    this.$Axios2.Post(this.url2,params)
		    .then(function(res) {	
		    	 that.wantBtnLoading=false
		    	 // let arg='[{"comId":"'+that.comId+'"}]' 
		    	 // that.link('/market/orderPay/goodsInfo',arg)
		    	 that.getIm(that.comId,that.data.userNickname,that.userId,that.data.comUid,that.data.goodsImage,that.data.avatar,that.ordersId)
		    })	       	 	     
	    },					
		clickFun(type,item){			
			if(type==1){
				this.showInputBox=true
				let that=this	
				this.isAbsolute=true
				that.$nextTick(function(){
					that.$refs.inputBox.focus();
				})														
			}
			else if(type==2){
			  	let disuid=item.disUid
				let arg='[{"userId2":"'+disUid+'"}]' 
				this.link('/market/manager/homePage',arg)					
			}
			else if(type==3){
				let disnickname=item.disNickname
				let disparentid=item.disParentid
				let disuid=item.disUid
				let disid=item.disId
                this.placeholder="回复"+disnickname  
		    	if(disparentid!='0'){
		    		this.parentId=disparentid
		    		this.disGid=disuid
		    	}else{
		    		this.parentId=disid
		    		this.disGid=''
		    	}
				this.showInputBox=true
				let that=this
				this.isAbsolute=true
				that.$nextTick(function(){
					that.$refs.inputBox.focus();
				})										
			}			
			else if(type==4){
			   	let arg='[{"comId":"'+item.comId+'"},{"type":"1"}]'
			   	let url=this.concatUrl('/market/goods/detail')
			   	this.link('/market/goods/detail',arg)				
			}		
			else if(type==5){
				this.isAbsolute=false
            	this.showInputBox=false
                this.test='' // 重置输入框
                this.parentId=0 // 重置评论级别
                this.disGid='' // 重置被评论人的ID
                this.placeholder="想跟TA说点什么呢…"				
			}
			return false
		},
	    // 发送留言
	    send(){	    	
	    	if(this.test==''){
	    		this.$toast('留言或回复不能为空')
	    		return false
	    	}
	    	let params={
	    		disTxt:this.test,
	    		disUid:this.userId,
	    		disCid:this.comId,
	    		disParentid:this.parentId,
	    		disGid:this.disGid
	    	}	    	
	      	let that=this
		    this.$Axios2.Post(this.url4,params)
		    .then(function(res) {
		       that.$toast('评论成功')
		       that.$refs.floor22.addLeaver()               
               that.test='' // 重置输入框
               that.parentId=0 // 重置评论级别
               that.disGid='' // 重置被评论人的ID
               that.showInputBox=false
               that.isAbsolute=false
//			   that.$nextTick(function(){
//				  that.$refs.inputBox.focus();
//			   })	               
		    })
	    },

				
		// 点赞事件
		changePraise(){
			let num=this.goodsIsPraise
			let that=this
			let url=num>0?this.url3:this.url2
            let params={
            	userId:this.userId,
            	relationtype:1,
            	typeId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'已取消点赞':'点赞成功'
              that.goodsIsPraise=num>0?0:1
              that.$toast(test)
		    })			
		},
		// 收藏事件
		changeCollection(){
			let num=this.goodsIsCollection
			let that=this
			let url=num>0?this.url8:this.url7
            let params={
            	userId:this.userId,
            	goodsId:this.comId
            }
		    this.$Axios2.Post(url,params)
		    .then(function(res) {
		      let test=num>0?'已取消收藏':'收藏成功'
              that.goodsIsCollection=num>0?0:1
              that.$toast(test)
		    })			
		},		
		showShare(){
			this.$refs.share.show()
		},
	    // 获取详情信息
	    getData(){
	      	let that=this	      	
		    this.$Axios2.Get(this.url1+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {	
		       
		       if(that.userId==res.data.comUid){
		       	 that.isOther=false
		       }
		       that.goodsCount=res.data.goodsCount
		       that.goodsState=res.data.goodsState
		       let categoryId=res.data.categoryId
		       that.comIspost=res.data.comIspost
		       that.limitCount=res.data.limitCount
               that.data=res.data;
               if(res.data.lastAccesstime){
               	   that.lastAccesstime=that.timeago(res.data.lastAccesstime)
               }
               if(res.data.goodsLabel){
               	   that.goodsLabel=res.data.goodsLabel.split(',')
               }
               if(res.data.goodsIsPraise){
               	 that.goodsIsPraise=res.data.goodsIsPraise
               }
               if(res.data.goodsIsCollection){
               	that.goodsIsCollection=res.data.goodsIsCollection
               }
               let params={
				  "categoryId": categoryId,
				  "comId": that.comId,
				  "limitCount": 30
				}               	               
                that.$Axios2.Post(that.url6,params).then(function(result) {
               	 that.goodsList=result.data.goodsList
                })
		    })		    	
	    },	 
	    // 添加浏览记录
	    addHistory(){
	      	let that=this
	      	let params={
	      		userId:this.userId,
	      		comId:this.comId 
	      	}
		    this.$Axios2.Post(this.url5,params)    	
	    },
	    //return
	    isFinish(){
	      if(this.type==1){
	      	return "1";
	      }else{
	      	return ''
	      }
	    }	    
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;
		this.type=this.$router.currentRoute.query.type;
		this.getData()	
		this.addHistory()
		window.isFinish=this.isFinish
		let that=this
		this.$Axios2.Get(this.url9+'/'+this.userId+'/'+this.comId).then(function(res){
			let result=JSON.stringify(res.data.orders)
			if(result!='{}'){
				that.ordersId=res.data.orders.ordersId
			}
		})
		//window.addEventListener("touch", this.clickFun);
	},
	// 在离开页面的时候要销毁 函数否则 所有页面都存在
	destroyed(){
        // window.removeEventListener('touch',this.clickFun)
    },
}
</script>

<style scoped lang="scss">
*{box-sizing: border-box;cursor: pointer;}
.wrap{padding: 10px 15px;margin-top: 50px;}
.van-nav-bar__title{font-weight: bold;}
.m_desc{font-size: 14px;margin-bottom: 10px;line-height: 1.6;}
.m_desc_img>img{width: 100%;display: block;border-radius:10px;margin-bottom: 5px;}

.cc{display: flex;justify-content: center;align-items: center;}


.inputBox{position: fixed;bottom: 0;left: 0;;box-sizing: border-box;
z-index: 200;width: 100%;}
.inputBox .boxWrap{width: 100%;
background: #fff;display: flex;padding: 10px 5px;align-items: center;height: 50px}
.i1{width: 30px;height: 30px;display: flex;
justify-content: center;align-items: center;}
.icon{color: #888;}
.i2{width: 38px;height: 30px;padding-left: 8px;}
.i2>img{display: block;width: 30px;height: 30px;border-radius: 4px;}
.i3{flex: 1;padding-left: 8px;}
.i4{padding-left: 8px;}
.send{border-radius:4px;background:#FFD630;display: inline-block;padding: 9px 15px}
.sendInput{height: 30px;border:none;border-radius: 10px;padding-left: 10px;
width: 100%;background: #fff;}
.fixFooter{position: fixed;height: 50px;background: #fff;width: 100%;bottom: 0;left: 0;padding: 0 15px;display: flex;align-items: center;z-index: 100 ;
   .left{display:flex;width:70%;align-items:center;
   .left-item{margin-right: 16px;}
   .icon{width: 13px;height: 13px;margin-right: 5px;}   
   }
   .right{flex: 1;display: flex;align-items: center;justify-content: flex-end;
      .btn{padding: 6px 15px;background: #FFD630;border-radius: 20px;}
      .btn.active{background: #aaa;color: #fff;}
   }
}
.fixFooter.active{position: absolute;}
.popupWrap{width: 300px;background: #fff;font-size: 15px;}
.select{padding: 10px 0;display: flex;flex-wrap: wrap;
   span{background: #E5E5E5;color: 333;font-size: 12px;padding: 7px 15px;margin-right: 10px;border-radius: 20px;margin-bottom: 5px;}
}
</style>